<template>
  <Header/>
  <a-row style="margin-top: 110px;">
    <a-col :span="2"><!--空间占位--></a-col>
    <a-col v-if="keyword !== ''" style="text-align: center" :span="20">
      <!--侧边导航栏-->
      <a-menu v-model:selectedKeys="currentLeve1" theme="light" mode="horizontal">
        <a-menu-item key="1">
          <VideoCameraFilled />
          <span>视频</span>
        </a-menu-item>
        <a-menu-item key="2">
          <BookFilled />
          <span>文贴</span>
        </a-menu-item>
        <a-menu-item key="3">
          <ContactsFilled />
          <span>用户</span>
        </a-menu-item>
      </a-menu>
    </a-col>
    <div v-else>
      <h2>搜索值为空</h2>
    </div>
    <a-col :span="2"><!--空间占位--></a-col>
  </a-row>
  <router-view/>
</template>

<script setup>
import Header from "@/components/common/TopBar.vue";
import {BookFilled, ContactsFilled, VideoCameraFilled} from "@ant-design/icons-vue";
import {onBeforeMount, onBeforeUnmount, ref, watch} from "vue";
import router from "@/router/index.js";
import Pubsub from "pubsub-js";

const currentLeve1 = ref(['0']);
const keyword = ref('');

// let searchEventKey = Pubsub.subscribe('searchBegin', (msg, data) => {
//   if(data !== '') {
//     keyword.value = data;
//   }
// });

watch(currentLeve1, (val) => {
  if(val[0] === '1') {
    router.push({path:'/search/video', query:{keyword: keyword.value}})
  }
  if(val[0] === '2') {
    router.push({path:'/search/article', query:{keyword: keyword.value}})
  }
  if(val[0] === '3') {
    router.push({path:'/search/user', query:{keyword: keyword.value}})
  }
});

onBeforeMount(_=> {
  if(typeof router.currentRoute.value.query.keyword !== 'undefined') {
    keyword.value = router.currentRoute.value.query.keyword;
  }

  const url = router.currentRoute.value.fullPath;
  if(url.includes('video')) {
    currentLeve1.value = ['1'];
  } else if(url.includes('user')) {
    currentLeve1.value = ['3'];
  } else if(url.includes('article')) {
    currentLeve1.value = ['2'];
  }
})

onBeforeUnmount(_=> {
  //Pubsub.unsubscribe(searchEventKey);
})

</script>

<style scoped>

</style>